vant ui的dialog二次封装使用 |
您所在的位置：网站首页 › vant dialog弹窗点不动 › vant ui的dialog二次封装使用 |
vant ui的dialog二次封装使用
|
一，实现的效果
第一点，vant ui的底下的虚线和关闭按钮，无法放到van dialog组件中，因为蒙版已经定义了。 第二点，弹出框弹出时有动画，为了实现虚线和关闭按钮也出现动画效果，需要额外增加动画效果 第三点，需要注意蒙版，弹出框，虚线（关闭按钮），这三者的z-index的关系 三，实现过程源码： 请使用付款码进行支付 export default { props: { showQR: { type: Boolean, default: false } }, data() { return { }; }, methods:{ close(){ this.$emit('closeQR') } } } @keyframes myfirst { 0% { transform: scale(0); transform-origin: center -300px; } 10% { transform: scale(0.6); transform: translateY(-100px); } 100% { transform: scale(1); } } .qrshowBox{ position: relative; /deep/.van-dialog{ width: 482px; overflow: auto; top:39%; border-radius: 20px; height: 562px; text-align: center; z-index: 2047; .van-dialog__content{ height: 562px; display: flex; flex-direction: column; align-items: center; overflow: au; img{ width: 380px; height: 380px; vertical-align: middle; margin: 40px 0; flex-shrink: 0; } .btn{ width: 100%; height: 102px; background: linear-gradient(180deg, #68AAFF 0%, #3771FF 100%); border-radius: 0px 0px 20px 20px; border: none; font-size: 32px; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: #FFFFFF; } } } .footer{ position: absolute; animation: myfirst 0.3s; top: -200px; width: 100%; display: flex; z-index: 9999; flex-direction: column; align-items: center; .dash{ display: block; margin: 0 auto; border-left: 1px dashed #ffffff; height: 114px; } .delImg{ background-image: url(../assets/images/del.png); width: 66px; height: 66px; display: block; background-size: 100% 100%; } } } |
【本文地址】
今日新闻 |
推荐新闻 |